<template>
   <van-sticky>
      <van-nav-bar title="花花家居商城" />
   </van-sticky>
   <!-- 轮播图的时间以及指示器颜色 -->
   <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item>
         <van-image width="100%" height="auto" fit="cover" src="/assets/images/banner.jpg" />
      </van-swipe-item>

      <van-swipe-item>
         <van-image width="100%" height="auto" fit="cover" src="/assets/images/banner.jpg" />
      </van-swipe-item>

      <van-swipe-item>
         <van-image width="100%" height="auto" fit="cover" src="/assets/images/banner.jpg" />
      </van-swipe-item>
   </van-swipe>
   <van-grid :border="false" :column-num="4">
      <van-grid-item to="/product/index" text="全部商品">
         <template #icon>
            <van-image width="50" height="50" src="/assets/images/quanbu.png" />
         </template>
      </van-grid-item>
      <van-grid-item text="商品直播">
         <template #icon>
            <van-image width="50" height="50" src="/assets/images/zhibo.png" />
         </template>
      </van-grid-item>
      <van-grid-item to="/coupon/index" text="优惠活动">
         <template #icon>
            <van-image width="50" height="50" src="/assets/images/youhui.png" />
         </template>
      </van-grid-item>
      <van-grid-item to="/product/rank" text="榜单排行">
         <template #icon>
            <van-image width="50" height="50" src="/assets/images/bangdan.png" />
         </template>
      </van-grid-item>
   </van-grid>

   <div class="type">新品推荐</div>

   <div class="list">
      <router-link to="/product/info" class="item">
         <div class="back">
            <img src="/assets/images/4.jpg" />
         </div>
         <p class="price">￥288</p>
      </router-link>
      <router-link to="/product/info" class="item">
         <div class="back">
            <img src="/assets/images/5.jpg" />
         </div>
         <p class="price">￥288</p>
      </router-link>
      <router-link to="/product/info" class="item">
         <div class="back">
            <img src="/assets/images/6.jpg" />
         </div>
         <p class="price">￥288</p>
      </router-link>
      <router-link to="/product/info" class="item">
         <div class="back">
            <img src="/assets/images/7.jpg" />
         </div>
         <p class="price">￥288</p>
      </router-link>
   </div>

   <Tabbar />
</template>
<script setup>
//全局代理，选项式的语法的this同理方法
const { proxy}  = getCurrentInstance();

</script>
<style scoped>
@import "/assets/css/home.css";
</style>